<template>
	<div class="terminalIndexContent">
		<div class="terminalIndexTreeContent">
			<!-- <TreeList :list="treeList" :cocnfig="defaultProps" :handleNode="treeListNodeClick"></TreeList> -->
			<TreeList2
				v-if="isShow"
				:list="treeData"
				:cocnfig="defaultPropsData"
				:listType="listType"
				:handleNode="treeListNodeClick"
				:handleNodeDelete="treeListNodeDelete"
				:handleNodeAdd="treeListNodeAdd"
				:handleNodeEdit="treeListNodeEdit"
			></TreeList2>
		</div>
		<div class="terminalIndexListContent">
			<div class="terminalIndexListTab">
				<div class="terminalIndexListTabBtn">
					<span :class="spanIsActive == 2 ? 'isActive' : ''" @click="terminalTabClick(2)">{{ `上线中(${onlineCount})` }}</span>
					<span :class="spanIsActive == 1 ? 'isActive' : ''" @click="terminalTabClick(1)">{{ `已入网(${connectedCount})` }}</span>
					<span :class="spanIsActive == 0 ? 'isActive' : ''" @click="terminalTabClick(0)">{{ `故障中(${faultCount})` }}</span>
					<!-- <span class="isActive" v-show="spanIsActive == 0" @click="allRegister">批量注册</span> -->
				</div>
				<div class="terminalNetworkAdd">
					<wj-Button type="save" v-show="spanIsActive == 2" @click="handleDownloadTemplate"> 下载模板 </wj-Button>

					<el-upload
						class="upload-demo"
						action="#"
						:auto-upload="false"
						multiple
						:limit="1"
						:show-file-list="false"
						ref="uploadExcel"
						:on-change="fileChange"
					>
						<wj-Button type="save" v-show="spanIsActive == 2"> 批量导入 </wj-Button>
					</el-upload>
					<el-upload
						class="upload-demo"
						action="#"
						:auto-upload="false"
						multiple
						:limit="1"
						:show-file-list="false"
						ref="uploadMap"
						:on-change="mapChange"
					>
						<wj-Button type="save"> 上传地图 </wj-Button>
					</el-upload>
					<wj-Button type="save" @click="handleCoord"> 编辑坐标 </wj-Button>
					<wj-Button type="save" v-show="spanIsActive == 2" @click="handleTerminalNetworkAdd"> 新增设备 </wj-Button>
				</div>
				<div class="terminalIndexListTabSearch">
					<el-input
						placeholder="请输关键字检索"
						type="text"
						v-model="searchValue"
						@keyup.enter.native="
							(e) => {
								e.target.blur();
							}
						"
						@blur="searchEvent"
					></el-input>
				</div>
			</div>
			<div class="terminalIndexListArray">
				<div class="terminalIndexListArrayContent">
					<el-table
						:data="tableData"
						style="width: 100%"
						:default-sort="{ prop: 'name', order: 'descending' }"
						v-customloading="partLoading"
						@selection-change="handleSelectionChange"
						:row-class-name="'tableRowClassName'"
					>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="internalNumber" label="公桩号"></el-table-column>
            <el-table-column prop="protocol" label="通讯协议">
							<template slot-scope="scope">
								<span v-if="scope.row.protocol == 1">电明可变信息标志通信协议</span>
								<span v-if="scope.row.protocol == 2">诺瓦通讯协议</span>
								<span v-if="scope.row.protocol == 3">三思通讯协议</span>
								<span v-if="scope.row.protocol == 4">高科信通讯协议</span>
								<span v-if="scope.row.protocol == 5">元亨信通讯协议</span>
								<span v-if="scope.row.protocol == 6">仰邦科技通讯协议</span>
								<span v-if="scope.row.protocol == 7">汉威光电通讯协议</span>
							</template>
						</el-table-column>
            <el-table-column prop="clientIP" label="控制器IP"></el-table-column>
						<!-- <el-table-column prop="person" label="负责人" width="180"> </el-table-column> -->
						<!-- <el-table-column prop="contact" label="联系方式" width="180"> </el-table-column> -->
            <el-table-column prop="clientPhoneNumber" label="前置装置电话"></el-table-column>
            <el-table-column label="设备操作" v-if="spanIsActive == 1">
							<template slot-scope="scope">
                <el-link type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-link>
								<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
								<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                <el-link type="primary" @click="handleSmsCheck(scope.$index, scope.row)">SIM卡检测</el-link>
                <el-popconfirm
                    title="确定重启这台前置装置吗？"
                    icon-color="red"
                    confirm-button-type="success"
                    @confirm="handleReboot(scope.$index, scope.row)">
                  <el-link type="primary" slot="reference">重启</el-link>
                </el-popconfirm>
              </template>
						</el-table-column>
            <el-table-column label="情报板控制" v-if="spanIsActive == 1">
              <template slot-scope="scope">
                <el-link v-show="scope.row.smartPowerStatus !== 2" type="primary"
                         @click="handleEveryClose(scope.$index, scope.row)">一键断电关屏
                </el-link>
                <el-link type="primary" @click="openBlackScreenCloseDialogVisible(scope.$index, scope.row)">
                  一键指令黑屏
                </el-link>
                <el-popconfirm
                    title="确定点亮这块情报板吗？"
                    icon-color="red"
                    confirm-button-type="success"
                    @confirm="handlerOpenScreenAction(scope.$index, scope.row)">
                  <el-link type="primary" slot="reference">一键指令亮屏</el-link>
                </el-popconfirm>
              </template>
            </el-table-column>
            <el-table-column label="设备操作" v-if="spanIsActive == 2">
							<template slot-scope="scope">
								<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
								<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
								<el-link type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-link>
							</template>
						</el-table-column>
            <el-table-column label="设备操作" v-if="spanIsActive == 0">
							<template slot-scope="scope">
								<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
								<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
								<el-link type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
        <!-- 一键黑屏弹出框 -->
        <el-dialog
            title="黑屏指令确认"
            :visible.sync="this.blackScreenCloseDialogVisible"
            width="50%"
            @close="closeBlackScreenCloseDialogVisible"
        >
          <el-main>
            <el-form>
              <el-form-item label="请选择黑屏方式">
                <el-radio-group v-model="boardBlackScreen.boardDisplayStatus">
                  <el-radio label=1>录包指定内容黑屏</el-radio>
                  <!--                  <el-radio label=2 >情报板指令黑屏</el-radio>-->
                </el-radio-group>
              </el-form-item>

              <el-main v-show="boardBlackScreen.boardDisplayStatus === '1'">
                <el-form-item label="录包内容">
                  <el-input
                      type="textarea"
                      :rows="5"
                      placeholder="此处显示上次录包内容"
                      v-model="boardBlackScreen.boardScreenRecord"
                      readonly
                  ></el-input>
                </el-form-item>

                <el-form-item label="录包操作">
                  <el-button
                      type="primary"
                      @click="sendScreenRecordPolicy"
                      :loading="boardBlackScreen.boardScreenAction !== 0"
                  >
                    {{ boardBlackScreen.boardScreenAction !== 0 ? "录包中..." : "下发录包策略" }}
                  </el-button>
<!--                  <el-button type="danger" @click="clearContent" :disabled="!boardBlackScreen.boardScreenRecord">-->
<!--                    清空录包内容-->
<!--                  </el-button>-->
                  <el-button
                      type="primary"
                      @click="cancelScreenRecordPolicy" :disabled="boardBlackScreen.boardScreenAction === 0">
                    取消录包
                  </el-button>
                </el-form-item>
              </el-main>
            </el-form>
          </el-main>

          <div slot="footer" class="dialog-footer">
            <el-button @click="closeBlackScreenCloseDialogVisible">取消</el-button>
            <el-button type="primary" @click="sendScreenAction">下发黑屏指令</el-button>
          </div>
        </el-dialog>
				<div class="terminalIndexListArrayPage">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[12]"
						:page-size="pageSize"
						layout="total, prev, pager, next, jumper"
						:total="total"
					>
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 自定义alertBox弹框——表单输入 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox contentBoxDetailsTerminal_class">
				<div class="contentBox_header">
					<p>编辑终端信息</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body contentBox_body_wrap">
					<div class="infoRow_form_wrap_small_title">情报板配置</div>
					<div class="infoRow_form_wrap">
						<span>名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terminalName" placeholder="请输入终端名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>公桩号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.internalNumber" placeholder="请输入公桩号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>通讯协议<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="edifFormSelect1"
								v-model="terminalEdit.terminalAgreement"
								placeholder="请选择通讯协议"
								@change="
									(value) => {
										selectLock(value, 'edifFormSelect1');
									}
								"
							>
								<el-option v-for="(item, index) in optionAgreement" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>型号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="edifFormSelect2"
								v-model="terminalEdit.information"
								placeholder="请选择情报板型号"
								@change="
									(value) => {
										selectLock(value, 'edifFormSelect2');
									}
								"
							>
								<el-option v-for="(item, index) in intelligenceOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>方向<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.direction" placeholder="请输入情报板方向" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>编号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.vmbNumber" placeholder="请输入情报板编号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>所属机构<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.organization" placeholder="请输入所属机构" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>所属组<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="edifFormSelect3"
								v-model="terminalEdit.terminalGroup"
								placeholder="请选择分组"
								@change="
									(value) => {
										selectLock(value, 'edifFormSelect3');
									}
								"
							>
								<el-option v-for="(item, index) in terminalGroupOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>控制器IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.clientIP" placeholder="请输入控制器IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Gateway"> -->
					<div class="infoRow_form_wrap">
						<span>控制器网关<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.clientGateway" placeholder="请输入控制器网关" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap" v-show="terminalEdit.terminalAgreement == '5'">
						<span>分辨率 (高*宽)</span>
						<div class="form-item">
							<el-input
								v-model="terminalEdit.distinguishability"
								placeholder="请按照 “高*宽” 的格式输入分辨率（例：32*128）"
								v-validate="'resolution'"
							></el-input>
						</div>
					</div>
<!--					<div class="infoRow_form_wrap" v-show="(terminalEdit.terminalAgreement == '5' || terminalEdit.terminalAgreement == '6')">-->
					<div class="infoRow_form_wrap">
						<span>发布平台IP</span>
						<div class="form-item">
							<el-input v-model="terminalEdit.publishingPlatformIp" placeholder="请输入发布平台IP" v-validate="'ipAddrAndnull'"></el-input>
						</div>
					</div>
          <div class="infoRow_form_wrap">
            <span>情报板端口</span>
            <div class="form-item">
              <el-input
                  v-model="terminalEdit.boardPort"
                  placeholder="请输入情报板端口"
                  v-validate="'portAndnull'"
              ></el-input>
            </div>
          </div>
          <div class="infoRow_form_wrap">
            <span>VPN类型</span>
            <div class="form-item">
              <el-select
                  v-model="terminalEdit.vpnFlag"
                  placeholder="请选择VPN类型">
                <el-option v-for="(item, index) in vpnOption" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
					<div class="infoRow_form_wrap" v-show="terminalEdit.terminalAgreement == '5'">
						<span>发布平台端口</span>
						<div class="form-item">
							<el-input
								v-model="terminalEdit.publishingPlatformPort"
								placeholder="请输入发布平台端口"
								v-validate="'portAndnull'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap" v-show="terminalEdit.terminalAgreement == '5'">
						<span>发布平台心跳频率(秒)</span>
						<div class="form-item">
							<el-input
								v-model="terminalEdit.publishingPlatformHeartbeat"
								placeholder="请选择发布平台心跳频率(秒)"
								v-validate="'pinAndNull'"
							></el-input>
						</div>
					</div>

					<div class="infoRow_form_wrap_small_title">前置装置配置</div>
					<div class="infoRow_form_wrap">
						<span>UUID<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								v-model="terminalEdit.terminalNameSN"
								placeholder="请输入UUID号"
								:disabled="spanIsActive == 2 || spanIsActive == 0 || spanIsActive == 1"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>SN<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								v-model="terminalEdit.uuid"
								placeholder="请输入SN号"
								:disabled="spanIsActive == 2 || spanIsActive == 0 || spanIsActive == 1"
							></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.ipAddress" placeholder="请输入前置装置IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>子网掩码<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terMask" placeholder="请输入前置装置掩码" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>网关<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terGateway" placeholder="请输入前置装置网关" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>物联卡ICCID</span>
						<div class="form-item">
							<el-input v-model="terminalEdit.clientPhoneNumber" placeholder="请输入前置装置物联卡ICCID号码" disabled></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>箱门距离初始化延迟时间 (min)<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.delay_time" placeholder="请输入测距延迟时间" v-validate="'required'"></el-input>
						</div>
					</div>

					<div class="infoRow_form_wrap_small_title">运维模块配置</div>
					<div class="infoRow_form_wrap">
						<span>IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terminalIp" placeholder="请输入内容管理平台IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>接收短信手机号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terminalPhone" placeholder="请输入联系方式"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap">
						<span>负责人<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalEdit.terminalPeople" placeholder="请输入负责人" v-validate="'required'"></el-input>
						</div>
					</div> -->

					<div class="infoRow_form_wrap_small_title">安全模块配置</div>
					<div class="infoRow_form_wrap">
						<span>VPN网关IP</span>
						<div class="form-item">
							<el-input v-model="terminalEdit.vpnGatewayIp" placeholder="请输入VPN网关IP"></el-input>
						</div>
					</div>

<!--          <div class="infoRow_form_wrap_small_title">摄像头配置</div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>IP</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraIp" placeholder="请输入摄像头IP"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录用户名</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraAccountName" placeholder="请输入摄像头用户名"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录密码</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraAccountPassword" placeholder="请输入摄像头用户登录密码"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录端口</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraPort" placeholder="请输入摄像头登录端口"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>抓拍时长</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraTimeLen" placeholder="请输入摄像头抓拍时长，默认 60 秒"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>抓拍间隔</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="terminalEdit.cameraInterval" placeholder="请输入摄像头抓拍间隔，默认 5 秒"></el-input>-->
<!--            </div>-->
<!--          </div>-->

					<div class="infoRow_form_wrap_small_title">发布管理配置</div>
					<div class="infoRow_form_wrap">
						<span>发布操作员<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="edifFormSelect4"
								v-model="terminalEdit.monitorOpt"
								multiple
								collapse-tags
								placeholder="请选择监控组人员"
								v-validate="'selectAtLeast'"
								@change="
									(value) => {
										selectLock(value, 'edifFormSelect4');
									}
								"
							>
								<el-option v-for="(item, index) in monitorOptArr" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>发布管理员<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="edifFormSelect5"
								v-model="terminalEdit.monitorManage"
								multiple
								collapse-tags
								placeholder="请选择监控组管理员"
								v-validate="'selectAtLeast'"
								@change="
									(value) => {
										selectLock(value, 'edifFormSelect5');
									}
								"
							>
								<el-option v-for="(item, index) in monitorManageArr" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<!-- <wj-Button type="save" @click="generateNetworkAccessPermissions">生成入网许可</wj-Button> -->
					<wj-Button type="save" v-checksubmit="{ submitEvent: generateNetworkAccessPermissions, cls: 'contentBoxDetailsTerminal_class' }"
						>生成入网许可</wj-Button
					>
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxFormConfirm, cls: 'contentBoxDetailsTerminal_class' }"
						>确定</wj-Button
					>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——数据显示 -->
		<AlertBox :alertBoxVisible="alertBoxDetailsVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>终端注册</p>
					<i class="wj-icon-guanbi" @click="alertBoxDetailsclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_details">
						<span>终端型号</span>
						<span>{{ terminalRegister.terminalType }}</span>
					</div>
					<div class="infoRow_details">
						<span>IP地址</span>
						<span>{{ terminalRegister.terminalIP }}</span>
					</div>
					<div class="infoRow_details">
						<span>MAC地址</span>
						<span>{{ terminalRegister.terminalMAC }}</span>
					</div>
					<div class="infoRow_details">
						<span>序列号</span>
						<span>{{ terminalRegister.terminalSerial }}</span>
					</div>
					<!--					<div class="infoRow_details">
						<span>位置信息</span>
						<span>{{ terminalRegister.terminalPlace }}</span>
					</div>-->
					<div class="infoRow_details">
						<span>上线时间</span>
						<span>{{ terminalRegister.terminalLoginTime }}</span>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="alertBoxDetailsConfirm">通过</wj-Button>
					<wj-Button type="save" @click="alertBoxDetailsRefuse">拒绝</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——tab切换 -->
		<AlertBox :alertBoxVisible="alertBoxTabVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>设备数据</p>
					<i class="wj-icon-guanbi" @click="alertBoxTabclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="tabIndex">
						<div :class="tabIndexActiveIndex == 0 ? 'tabIndexActive' : ''" @click="tabIndexClick(0)">
							<span>基本信息</span>
						</div>
						<div :class="tabIndexActiveIndex == 1 ? 'tabIndexActive' : ''" @click="tabIndexClick(1)">
							<span>发布日志</span>
							<!-- <span class="tabNumber">12</span> -->
						</div>
						<div :class="tabIndexActiveIndex == 2 ? 'tabIndexActive' : ''" @click="tabIndexClick(2)">
							<span>情报板维护记录</span>
							<!-- <span class="tabNumber">12</span> -->
						</div>
						<!-- 14.28% -> 16.66% -->
						<!-- <div :class="tabIndexActiveIndex == 3 ? 'tabIndexActive' : ''" @click="tabIndexClick(3)">
							<span>设备状态</span>
						</div> -->
						<div :class="tabIndexActiveIndex == 4 ? 'tabIndexActive' : ''" @click="tabIndexClick(4)">
							<span>绑定策略</span>
							<!-- <span class="tabNumber">12</span> -->
						</div>
						<div :class="tabIndexActiveIndex == 6 ? 'tabIndexActive' : ''" @click="tabIndexClick(6)">
							<span>情报源IP</span>
							<!-- <span class="tabNumber">12</span> -->
						</div>
					</div>
					<div class="tabList">
						<div class="tabListItem_column" v-show="tabIndexActiveIndex == 0">
							<div class="tabListItemRow_column">
								<span>设备名称</span>
								<span>{{ terminalBaseInfo.name }}</span>
							</div>
							<div class="tabListItemRow_column">
								<span>设备IP</span>
								<span>{{ terminalBaseInfo.ipAddress }}</span>
							</div>
							<div class="tabListItemRow_column">
								<span>设备分组</span>
								<span>{{ terminalBaseInfo.groupName }}</span>
							</div>
							<!--							<div class="tabListItemRow_column">-->
							<!--								<span>位置信息</span>-->
							<!--								<span>{{ terminalBaseInfo.coord }}</span>-->
							<!--							</div>-->
							<div class="tabListItemRow_column">
								<span>固件版本</span>
								<span>{{ terminalBaseInfo.version }}</span>
							</div>
							<div class="tabListItemRow_column">
								<span>vpn链路状态</span>
								<span :style="healthyColor(terminalBaseInfo.vpnState == 0 ? '正常' : '异常', '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.vpnState == 0 ? "正常" : "异常" }}
								</span>
							</div>
							<div class="tabListItemRow_column">
								<span>控制器状态</span>
								<span :style="healthyColor(terminalBaseInfo.controllerState == 0 ? '正常' : '异常', '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.controllerState == 0 ? "正常" : "异常" }}
								</span>
							</div>
							<div class="tabListItemRow_column">
								<span>箱门状态</span>
								<span :style="healthyColor(terminalBaseInfo.doorState, '关')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.doorState }}
								</span>
							</div>
							<div class="tabListItemRow_column">
								<span>设备状态</span>
								<span style="color: #67c23a" v-if="(terminalBaseInfo.state != 1 ? '在线' : '离线') == '在线'">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.state != 1 ? "在线" : "离线" }}
								</span>
								<span style="color: #f56c6c" v-if="(terminalBaseInfo.state != 1 ? '在线' : '离线') == '离线'">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.state != 1 ? "在线" : "离线" }}
								</span>
							</div>
							<!-- <div class="tabListItemRow_column">
								<span>设备姿态</span>
								<span :style="healthyColor(terminalBaseInfo.devPosture, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.devPosture }}
								</span>
							</div> -->
							<div class="tabListItemRow_column">
								<span>箱体湿度</span>
								<span :style="healthyColor(terminalBaseInfo.rhStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.devHumidity }}
								</span>
							</div>
							<div class="tabListItemRow_column">
								<span>箱体温度</span>
								<span :style="healthyColor(terminalBaseInfo.temptureStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.devTemperature }}
								</span>
							</div>
							<div class="tabListItemRow_column">
								<span>cpu使用率</span>
								<span :style="healthyColor(terminalBaseInfo.cpuStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.cpu }}
								</span>
							</div>
							<!--              <div class="tabListItemRow_column">-->
							<!--                <span>cpu状态</span>-->
							<!--                <span :style="healthyColor(terminalBaseInfo.cpuStatus, '正常')">{{ terminalBaseInfo.cpuStatus }}</span>-->
							<!--              </div>-->
							<div class="tabListItemRow_column">
								<span>内存使用率</span>
								<span :style="healthyColor(terminalBaseInfo.memStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.memoryNow }}
								</span>
							</div>
							<!--              <div class="tabListItemRow_column">-->
							<!--                <span>内存状态</span>-->
							<!--                <span :style="healthyColor(terminalBaseInfo.memStatus, '正常')">{{ terminalBaseInfo.memStatus }}</span>-->
							<!--              </div>-->
							<div class="tabListItemRow_column">
								<span>磁盘使用率</span>
								<span :style="healthyColor(terminalBaseInfo.diskStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.diskNow }}
								</span>
							</div>
							<!--              <div class="tabListItemRow_column">-->
							<!--                <span>磁盘状态</span>-->
							<!--                <span :style="healthyColor(terminalBaseInfo.diskStatus, '正常')">{{ terminalBaseInfo.diskStatus }}</span>-->
							<!--              </div>-->
							<div class="tabListItemRow_column">
								<span>前置装置运行温度</span>
								<span :style="healthyColor(terminalBaseInfo.cpuTempStatus, '正常')">
									{{ terminalBaseInfo.powerStatus == 1 ? "--" : terminalBaseInfo.cpuTempture }}
								</span>
							</div>
						</div>
						<div class="tabListTable" v-show="tabIndexActiveIndex == 1">
							<el-table :data="tableDataAlertBox1" style="width: 100%" v-customloading="partLoading">
								<el-table-column type="index" width="80" label="序号"> </el-table-column>
								<el-table-column prop="publishTime" label="发布时间" width="280"> </el-table-column>
								<!-- <el-table-column prop="id" label="发布信息ID" width="180"> </el-table-column> -->
								<el-table-column prop="content" label="发布内容" show-overflow-tooltip>
									<template slot-scope="scope">
										<el-image
											v-if="scope.row.type === '2' || scope.row.type === 2"
											style="width: 24px; height: 24px; margintop: 7px"
											fit="cover"
											:src="scope.row.imagePateStr"
											:preview-src-list="[scope.row.imagePateStr]"
										>
											<div slot="error">
												<i class="wj-icon-24gl-pictureSplit"></i>
											</div>
										</el-image>
										<span slot-scope="scope" v-else>
											{{ scope.row.content }}
										</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="tabListTable" v-show="tabIndexActiveIndex == 2">
							<el-table :data="tableDataAlertBox2" style="width: 100%" v-customloading="partLoading">
								<el-table-column type="index" width="180" label="序号"> </el-table-column>
								<el-table-column prop="operateTime" label="运维日期"> </el-table-column>
								<!-- <el-table-column prop="employee" label="运维人员"> </el-table-column> -->
								<!-- <el-table-column prop="content" label="运维时长" width="180"> </el-table-column> -->
							</el-table>
						</div>
						<div class="tabListItem" v-show="tabIndexActiveIndex == 3">
							<div class="tabListItemRow">
								<span>CPU</span>
								<span>{{ terminalState.cpu }}</span>
							</div>
							<div class="tabListItemRow">
								<span>内存</span>
								<span>{{ terminalState.memory }} GB</span>
							</div>
							<div class="tabListItemRow">
								<span>存储</span>
								<span>{{ terminalState.storage }} GB</span>
							</div>
							<div class="tabListItemRow">
								<span>流量（管理口）</span>
								<span>{{ terminalState.managementPort }}</span>
							</div>
							<div class="tabListItemRow">
								<span>流量（数据口）</span>
								<span>{{ terminalState.dataPort }}</span>
							</div>
						</div>
						<div class="tabListTable" v-show="tabIndexActiveIndex == 4">
							<el-table
								:data="tableDataAlertBox"
								style="width: 100%"
								v-customloading="partLoading"
								@selection-change="handleSelectionChangeAlertBox"
							>
								<el-table-column type="selection" width="80"> </el-table-column>
								<el-table-column prop="name" label="策略名称" width="280"> </el-table-column>
								<el-table-column prop="dangerCollect" label="关键字" show-overflow-tooltip> </el-table-column>
							</el-table>
						</div>
						<div class="tabListTable" v-show="tabIndexActiveIndex == 5">
							<el-table
								:data="tableDataAlertBox"
								style="width: 100%"
								v-customloading="partLoading"
								@selection-change="handleSelectionChangeAlertBox"
							>
								<el-table-column type="selection" width="80"> </el-table-column>
								<el-table-column prop="name" label="安全防护规则" width="280"> </el-table-column>
								<el-table-column prop="safetyInfo" label="规则内容"> </el-table-column>
							</el-table>
						</div>
						<div class="tabListTable" v-show="tabIndexActiveIndex == 6">
							<el-table
								:data="tableDataAlertBox"
								style="width: 100%"
								v-customloading="partLoading"
								@selection-change="handleSelectionChangeAlertBox"
							>
								<el-table-column type="selection" width="80"> </el-table-column>
								<el-table-column prop="name" label="情报源名称" width="280"> </el-table-column>
								<el-table-column prop="ipAddress" label="情报源地址"> </el-table-column>
							</el-table>
						</div>
					</div>
					<div class="tabPage" v-show="tabIndexActiveIndex != 0 && tabIndexActiveIndex != 3">
						<el-pagination
							background
							@size-change="handleSizeChangeAlertBox"
							@current-change="handleCurrentChangeAlertBox"
							:current-page="currentPageAlertBox"
							:page-sizes="[5]"
							:page-size="pageSizeAlertBox"
							layout="total, prev, pager, next, jumper"
							:total="tabIndexActiveIndex == 1 ? totalAlertBox1 : tabIndexActiveIndex == 2 ? totalAlertBox2 : totalAlertBox"
						>
						</el-pagination>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button
						type="save"
						v-show="tabIndexActiveIndex == 4 || tabIndexActiveIndex == 5 || tabIndexActiveIndex == 6"
						@click="handleEmpty"
						>清空</wj-Button
					>
					<wj-Button
						type="save"
						v-show="tabIndexActiveIndex == 4 || tabIndexActiveIndex == 5 || tabIndexActiveIndex == 6"
						@click="handleAlertBoxDelete"
						>删除</wj-Button
					>
					<wj-Button type="save" @click="alertBoxTabConfirm">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——新增设备入网 -->
		<AlertBox :alertBoxVisible="alertBoxAddVisible">
			<div class="contentBox contentBoxAddTerminal_class">
				<div class="contentBox_header">
					<p>新增设备入网</p>
					<i class="wj-icon-guanbi" @click="alertBoxAddclose"></i>
				</div>
				<div class="contentBox_body contentBox_body_wrap">
					<div class="infoRow_form_wrap_small_title">情报板配置</div>
					<div class="infoRow_form_wrap">
						<span>名称<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terminalName" placeholder="请输入设备名称" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>公桩号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terminalNameNumber" placeholder="请输入公桩号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>通讯协议<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="addFormSelect1"
								v-model="terminalNetworkInfo.terminalAgreement"
								placeholder="请选择通讯协议"
								v-validate="'selectAtLeastOnly'"
								@change="
									(value) => {
										selectLock(value, 'addFormSelect1');
									}
								"
							>
								<el-option v-for="(item, index) in optionAgreement" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>型号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="addFormSelect2"
								v-model="terminalNetworkInfo.information"
								placeholder="请选择情报板型号"
								v-validate="'selectAtLeastOnly'"
								@change="
									(value) => {
										selectLock(value, 'addFormSelect2');
									}
								"
							>
								<el-option v-for="(item, index) in intelligenceOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>方向<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.direction" placeholder="请输入情报板方向" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>编号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.vmbNumber" placeholder="请输入情报板编号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>所属机构<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.organization" placeholder="请输入所属机构" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>所属组<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="addFormSelect3"
								v-model="terminalNetworkInfo.terminalGroup"
								placeholder="请选择分组"
								v-validate="'selectAtLeastOnly'"
								@change="
									(value) => {
										selectLock(value, 'addFormSelect3');
									}
								"
							>
								<el-option v-for="(item, index) in terminalGroupOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>控制器IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.clientIP" placeholder="请输入控制器IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Gateway"> -->
					<div class="infoRow_form_wrap">
						<span>控制器网关<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.clientGateway"
								placeholder="请输入控制器网关"
								v-validate="'required|ipAddr'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap" v-show="terminalNetworkInfo.terminalAgreement == '5'">
						<span>分辨率 (高*宽)</span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.distinguishability"
								placeholder="请按照 '高*宽' 的格式输入分辨率（例：32*128）"
								v-validate="'resolution'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>发布平台IP</span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.publishingPlatformIp"
								placeholder="请输入发布平台IP"
								v-validate="'ipAddrAndnull'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap" v-show="terminalNetworkInfo.terminalAgreement == '5'">
						<span>发布平台端口</span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.publishingPlatformPort"
								placeholder="请输入发布平台端口"
								v-validate="'portAndnull'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap" v-show="terminalNetworkInfo.terminalAgreement == '5'">
						<span>发布平台心跳频率(秒)</span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.publishingPlatformHeartbeat"
								placeholder="请选择发布平台心跳频率(秒)"
								v-validate="'pinAndNull'"
							></el-input>
						</div>
					</div>
          <div class="infoRow_form_wrap">
            <span>情报板端口</span>
            <div class="form-item">
              <el-input
                  v-model="terminalNetworkInfo.boardPort"
                  placeholder="请输入情报板端口"
                  v-validate="'portAndnull'"
              ></el-input>
            </div>
          </div>
          <div class="infoRow_form_wrap">
            <span>VPN类型</span>
            <div class="form-item">
              <el-select
                  v-model="terminalNetworkInfo.vpnFlag"
                  placeholder="请选择VPN类型">
                <el-option v-for="(item, index) in vpnOption" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>

					<div class="infoRow_form_wrap_small_title">前置装置配置</div>
					<div class="infoRow_form_wrap">
						<span>UUID<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terminalNameNumberSN" placeholder="请输入UUID号" v-validate="'required'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>SN<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.uuid" placeholder="请输入SN号" v-validate="'required'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.ipAddress" placeholder="请输入前置装置IP" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>子网掩码<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terMask" placeholder="请输入前置装置掩码" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap" v-show="GatewayMask.Mask"> -->
					<div class="infoRow_form_wrap">
						<span>网关<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terGateway" placeholder="请输入前置装置网关" v-validate="'required|ipAddr'"></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>物联卡ICCID</span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.clientPhoneNumber"
								placeholder="请输入前置装置物联卡ICCID号码"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>箱门距离初始化延迟时间 (min)<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.delay_time" placeholder="请输入测距延迟时间" v-validate="'required'"></el-input>
						</div>
					</div>

					<div class="infoRow_form_wrap_small_title">运维模块配置</div>
					<div class="infoRow_form_wrap">
						<span>IP<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input
								v-model="terminalNetworkInfo.terminalIp"
								placeholder="请输入内容管理平台IP"
								v-validate="'required|ipAddr'"
							></el-input>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>接收短信手机号<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terminalPhone" placeholder="请输入联系方式" ></el-input>
						</div>
					</div>
					<!-- <div class="infoRow_form_wrap">
						<span>负责人<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.terminalPeople" placeholder="请输入负责人" v-validate="'required'"></el-input>
						</div>
					</div> -->

<!--          <div class="infoRow_form_wrap_small_title">摄像头配置</div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>IP</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraIp" placeholder="请输入摄像头IP"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录用户名</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraAccountName" placeholder="请输入摄像头用户名"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录密码</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraAccountPassword" placeholder="请输入摄像头用户登录密码"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>登录端口</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraPort" placeholder="请输入摄像头登录端口"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>抓拍时长</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraTimeLen" placeholder="请输入摄像头抓拍时长，默认 60 秒"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="infoRow_form_wrap">-->
<!--            <span>抓拍间隔</span>-->
<!--            <div class="form-item">-->
<!--              <el-input v-model="cameraDevice.cameraInterval" placeholder="请输入摄像头抓拍间隔，默认 5 秒"></el-input>-->
<!--            </div>-->
<!--          </div>-->

					<div class="infoRow_form_wrap_small_title">安全模块配置</div>

					<div class="infoRow_form_wrap">
						<span>VPN网关IP</span>
						<div class="form-item">
							<el-input v-model="terminalNetworkInfo.vpnGatewayIp" placeholder="请输入VPN网关IP" v-validate="'ipAddrAndnull'"></el-input>
						</div>
					</div>

					<!-- <div class="infoRow_form_wrap" style="width: 100%">
						<span>
							<el-checkbox v-model="GatewayMask.Gateway" @change="change" label="控制器" border>控制器</el-checkbox>
							<el-checkbox v-model="GatewayMask.Mask" @change="change" label="掩码" border>前置装置</el-checkbox>
						</span>
						<div class="form-item"></div>
					</div> -->

					<div class="infoRow_form_wrap_small_title">发布管理配置</div>
					<div class="infoRow_form_wrap">
						<span>发布操作员<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="addFormSelect4"
								v-model="terminalNetworkInfo.monitorOpt"
								multiple
								collapse-tags
								placeholder="请选择监控组人员"
								v-validate="'selectAtLeast'"
								@change="
									(value) => {
										selectLock(value, 'addFormSelect4');
									}
								"
							>
								<el-option v-for="(item, index) in monitorOptArr" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form_wrap">
						<span>发布管理员<b style="color: rgb(248, 4, 4)">*</b></span>
						<div class="form-item">
							<el-select
								ref="addFormSelect5"
								v-model="terminalNetworkInfo.monitorManage"
								multiple
								collapse-tags
								placeholder="请选择监控组管理员"
								v-validate="'selectAtLeast'"
								@change="
									(value) => {
										selectLock(value, 'addFormSelect5');
									}
								"
							>
								<el-option v-for="(item, index) in monitorManageArr" :key="index" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: generateNetworkAccessPermissions, cls: 'contentBoxAddTerminal_class' }"
						>生成入网许可</wj-Button
					>
					<wj-Button type="save" v-checksubmit="{ submitEvent: alertBoxAddConfirm, cls: 'contentBoxAddTerminal_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 批量导入日志信息 -->
		<AlertBox :alertBoxVisible="alertBoxLogVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>批量导入日志信息</p>
					<i class="wj-icon-guanbi" @click="alertBoxLogclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="importTerminalErrorLog">
						<div class="infoRow_details" v-for="(item, index) in alertBoxLogArray" :key="index">
							<span></span>
							<span>{{ item }}</span>
						</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="alertBoxLogclose">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
// import TreeList from "@/views/common/TreeList";
import TreeList2 from "@/views/common/TreeList2";
import httpUrl from "@/utils/request/httpUrl";
import {
  terminal_all_register,
  terminal_all_unregister,
  terminal_updata,
  terminal_add,
  terminal_delete,
  terminal_every_register,
  terminal_all_every_register,
  terminal_baseInfo,
  terminal_content,
  terminal_operation,
  terminal_state,
  terminal_strategy,
  terminal_safety,
  terminal_admittance,
  issueflow_group,
  terminal_intelligence,
  terminal_removeAllPolicy,
  terminal_removePolicy,
  terminal_removePolicy_ipsource,
  terminal_generateNetworkAccessPermissions,
  control_terminalGroup,
  control_terminalGroup_delete,
  control_terminalGroup_add,
  control_terminalGroup_edit,
  control_terminalGroup_terminal,
  terminal_count,
  terminal_download_template,
  termianl_import_excel,
  terminal_upload_map,
  get_monitor_opt,
  get_monitor_manage,
  terminal_restart,
  camera_add,
  camera_query,
  camera_update,
  strategy_voltage_every,
  terminal_sms_check,
  terminal_update_info,
} from "@/utils/request/api";
export default {
	name: "TerminalIndex",
	components: {
		TreeList2,
	},
	data() {
		return {
      boardBlackScreen: {
        monitorEmployeeId: [],
        monitorAdminEmployeeId: [],
        terminalId: 0,

        boardDisplayStatus: 1,
        boardScreenRecord: "",
        boardScreenAction: 1,
      },
      recordContent: "",
      isRecording: false,
      radio: null,
      blackScreenCloseDialogVisible: false,






      restartButtonVisible: false,
			// 选择网关或者掩码
			Gateway: false,
			Mask: false,
			GatewayMask: {
				Gateway: true, // 控制器
				Mask: true, // 前置装置
			},
			// 局部刷新树形组件
			isShow: true,
			// 树形组件列表
			treeList: [],
			// 树形组件配置
			defaultProps: {
				children: "children",
				label: "groupName",
			},
			// 区分终端组0和关键字库组1
			listType: 0,
			treeData: [],
			defaultPropsData: {
				children: "children",
				label: "groupName",
			},
			// 搜索
			searchValue: "",
			// 上线中2 已入网1 故障中0
			spanIsActive: 2,
			// 弹窗——tab切换
			tabIndexActiveIndex: 0,
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 表格数据——弹窗
			tableDataAlertBox: [],
			tableDataAlertBox1: [],
			tableDataAlertBox2: [],
			multipleSelectionAlertBox: [],
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 分页当前页码——弹窗
			currentPageAlertBox: 1,
			// 总页码——弹窗
			totalAlertBox: 0,
			totalAlertBox1: 0,
			totalAlertBox2: 0,
			// 每页条数——弹窗
			pageSizeAlertBox: 5,
			// 分页初始化页码——弹窗
			pageNumAlertBox: 1,
			// 局部loading控制
			partLoading: false,
			// 自定义弹窗控制——表单输入
			alertBoxFormVisible: false,
			// 自定义弹窗控制——数据显示
			alertBoxDetailsVisible: false,
			// 自定义弹窗控制——tab切换
			alertBoxTabVisible: false,
			// 自定义弹窗控制——新增设备入网
			alertBoxAddVisible: false,
			// 下拉菜单——终端分组
			terminalGroupOptions: [],
			// 下拉菜单——情报板
			intelligenceOptions: [],
			// 编辑终端信息
			terminalEdit: {
				id: "",
				terminalName: "",
				terminalGroup: "",
				information: "",
				internalNumber: "",
				terminalNameSN: "",
				uuid: "",
				terminalPeople: "",
				terminalPhone: "",
				terminalAgreement: "3",
				terminalIp: "",
				clientIP: "",
				vpnGatewayIp: "",
        cameraId: 0,
        cameraIp: "",
        cameraAccountName: "",
        cameraAccountPassword: "",
        cameraPort: 0,
        cameraBrand: 1,
        cameraTimeLen: 10,
        cameraInterval: 2,
				organization: "",
				direction: "",
				vmbNumber: "",
				clientPhoneNumber: "",

				clientGateway: "",
				terMask: "",
				terGateway: "",
				delay_time: "20",
				ipAddress: "",

				monitorOpt: [],
				monitorManage: [],

				distinguishability: "",
				publishingPlatformIp: "",
				publishingPlatformPort: "",
				publishingPlatformHeartbeat: "",
        boardPort: -1,
        vpnFlag: 0,
			},
			// 注册终端信息
			terminalRegister: {
				id: "",
				terminalType: "",
				terminalIP: "",
				terminalMAC: "",
				terminalSerial: "",
				terminalPlace: "",
				terminalLoginTime: "",
			},
			// 设备协议
			optionAgreement: [
				{
					value: "1",
					label: "电明可变信息标志通信协议",
				},
				{
					value: "2",
					label: "诺瓦通讯协议",
				},
				{
					value: "3",
					label: "三思通讯协议",
				},
				{
					value: "4",
					label: "高科信通讯协议",
				},
				{
					value: "5",
					label: "元亨通讯协议",
				},
				// {
				// 	value: "6",
				// 	label: "卡莱特通讯协议",
				// },
        {
          value: "6",
          label: "仰邦科技通讯协议",
        },
        {
          value: "7",
          label: "汉威光电通讯协议",
        },
			],
      // vpn 选择 SM4:表示上元  SM2:表示国玲 。(默认是SM4加密)
      vpnOption: [{value: 0, label: "SM4"}, {value: 1, label: "SM2"}],
			// 发布管理员
			monitorManageArr: [],
			// 发布操作员
			monitorOptArr: [],
			// 新增设备入网信息
			terminalNetworkInfo: {
				terminalName: "",
				terminalNameNumber: "",
				terminalNameNumberSN: "",
				uuid: "",
				terminalPeople: "",
				terminalPhone: "",
				terminalAgreement: "3",
				terminalGroup: "",
				information: "",
				terminalIp: "",
				clientIP: "",
				vpnGatewayIp: "",
				organization: "",
				direction: "",
				vmbNumber: "",
				clientPhoneNumber: "",

				clientGateway: "",
				terMask: "",
				terGateway: "",
				delay_time: "20",
				ipAddress: "",

				monitorOpt: [],
				monitorManage: [],

				distinguishability: "",
				publishingPlatformIp: "",
				publishingPlatformPort: "",
				publishingPlatformHeartbeat: "",
        cameraId: 0,
        boardPort: "",
        vpnFlag: 0,
			},
      cameraDevice: {
        cameraIp: "",
        cameraAccountName: "",
        cameraAccountPassword: "",
        cameraPort: 0,
        cameraType: 1,
        cameraTimeLen: 10,
        cameraInterval: 2
      },
			// 保存终端id（用来在查看的时候tab切换查数据的时候使用）
			tabId: undefined,
			// 设备基础信息
			terminalBaseInfo: {
				powerStatus: "",

				name: "",
				ipAddress: "",
				groupName: "",
				coord: "",
				version: "",
				state: "",
				controllerState: "",
				vpnState: "",
				doorState: "",
				devPosture: "",
				devHumidity: "",
				rhStatus: "",
				devTemperature: "",
				temptureStatus: "",

				cpu: "",
				cpuStatus: "",
				memoryNow: "",
				memStatus: "",
				diskNow: "",
				diskStatus: "",
				cpuTempture: "",
				cpuTempStatus: "",
			},
			// 终端状态
			terminalState: {
				cpu: "",
				memory: "",
				storage: "",
				managementPort: "",
				dataPort: "",
			},
			// 分组id（用来判断是分组的还是全部的）
			groupIdClick: undefined,
			// 终端上线中、已入网、故障中括号中的数量
			onlineCount: 0,
			connectedCount: 0,
			faultCount: 0,
			// 批量导入文件上传  组件需要用的action
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/importTerminalBatch"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/importTerminalBatch"
					: "",
			// 上传地图
			actionStrMap:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/uploadMapFile"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/uploadMapFile"
					: "",
			// 批量导入日志信息
			alertBoxLogVisible: false,
			alertBoxLogArray: [],
		};
	},
	created() {},
	mounted() {
		this.spanIsActiveSelect();
		// 请求终端分组树形
		this.getTreeListNodeData();
		// 请求终端分组全部
		this.getAllTerminalGroup();
		// 请求情报板
		this.getAllIntelligence();
		this.getMonitorOptFun();
		this.getMonitorManageFun();
	},
	methods: {
    // 下发黑屏录包策略
    sendScreenRecordPolicy() {
      terminal_update_info({
        id: this.boardBlackScreen.terminalId,
        boardScreenAction: 1
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("下发成功")
          this.boardBlackScreen.boardScreenAction = 1;
        }
      })
    },
    // 取消黑屏录包策略
    cancelScreenRecordPolicy() {
      terminal_update_info({
        id: this.boardBlackScreen.terminalId,
        boardScreenAction: 0
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("取消录包成功")
          this.boardBlackScreen.boardScreenAction = 0;
        }
      })
    },
    // 打开黑屏弹窗
    openBlackScreenCloseDialogVisible(index, row) {
      this.boardBlackScreen = {
        terminalId: row.id,

        boardDisplayStatus: row.boardDisplayStatus + '',
        boardScreenRecord: row.boardScreenRecord,
        boardScreenAction: row.boardScreenAction,
      };
      this.blackScreenCloseDialogVisible = true;
    },
    // 关闭黑屏弹窗
    closeBlackScreenCloseDialogVisible() {
      this.blackScreenCloseDialogVisible = false;
    },
    // 下发黑屏动作
    sendScreenAction() {
      this.closeBlackScreenCloseDialogVisible()
      terminal_update_info({
        id: this.boardBlackScreen.terminalId,
        boardDisplayStatus: this.boardBlackScreen.boardDisplayStatus,
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("黑屏策略下发成功，请稍后查看屏幕情况")
        }
      });
    },
    // 处理亮屏动作
    handlerOpenScreenAction(index, row) {
      terminal_update_info({
        id: row.id,
        boardDisplayStatus: 0
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("亮屏策略下发成功，请稍后查看屏幕情况")
        }
      });
    },
    handleEveryClose(index, row) {
      this.$confirm("是否继续操作智能电源 ?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
            // 确认操作
            strategy_voltage_every({
              clientId: row.serial,
              status: 0,
              groupId: this.groupIdClick === undefined ? -1 : this.groupIdClick,
            }).then((res) => {
              console.log(res);
              if (res.code === 200) {
                this.reload();
                this.$msg.success("操作成功！");
              } else {
                this.$msg.error("操作失败！");
              }
            });
          })
          .catch(() => {
            // 取消操作
            this.$msg.info("已取消操作！");
          });
    },
		// select change事件触发  清空验证信息
		selectLock(val, refStr) {
			console.log("[[[[[");
			console.log(val);
			console.log(refStr);
			console.log(this.$refs[refStr].$el);

			if (this.$refs[refStr].$el.className.indexOf("tip_el")) {
				this.$refs[refStr].$el.classList.remove("tip_el");
			}
			if (this.$refs[refStr].$el.lastChild.className == "tip_msg") {
				this.$refs[refStr].$el.removeChild(this.$refs[refStr].$el.lastChild);
			}

			console.log("]]]]]");
		},
		// 查询发布操作员
		getMonitorOptFun() {
			get_monitor_opt().then((res) => {
				console.log(res);
				this.monitorOptArr = [];
				if (res.code == 200) {
					res.data.result.forEach((element) => {
						this.monitorOptArr.push({
							value: element.id,
							label: element.name + " ( " + element.loginName + " ) ",
						});
					});
				} else {
					this.$msg.error("发布操作员获取失败！");
				}
			});
		},
		// 查询发布管理员
		getMonitorManageFun() {
			get_monitor_manage().then((res) => {
				console.log(res);
				this.monitorManageArr = [];
				if (res.code == 200) {
					res.data.result.forEach((element) => {
						this.monitorManageArr.push({
							value: element.id,
							label: element.name + " ( " + element.loginName + " ) ",
						});
					});
				} else {
					this.$msg.error("发布管理员获取失败！");
				}
			});
		},
		// 下载模板
		handleDownloadTemplate() {
			terminal_download_template()
				.then((res) => {
					console.log(res);
					this.$msg.success("模板下载成功！");
					let content = res.data;
					let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
					let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
					if ("download" in document.createElement("a")) {
						// 非IE下载
						let elink = document.createElement("a");
						elink.download = fileName;
						elink.style.display = "none";
						elink.href = URL.createObjectURL(blob);
						document.body.appendChild(elink);
						elink.click();
						URL.revokeObjectURL(elink.href); // 释放URL 对象
						document.body.removeChild(elink);
					} else {
						// IE10+下载
						navigator.msSaveBlob(blob, fileName);
					}
				})
				.catch((err) => {
					console.log(err);
					this.$msg.error("模板下载失败！");
				});
			// window.open("https://" + window.location.host + "/downloadLocal/terminal.xlsx", "_parent");
		},
		// 批量导入文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			termianl_import_excel({
				file: file.raw,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$refs.uploadExcel.clearFiles();
					if (res.data.length <= 0) {
						this.$msg.success("文件导入成功！");
					} else {
						this.$msg.error("文件导入失败！");
						this.alertBoxLogArray = res.data;
						this.alertBoxLogVisible = true;
					}
				} else {
					this.$msg.error("文件导入失败！");
					this.$refs.uploadExcel.clearFiles();
				}
			});
			// if (file.status !== "ready") return;
			// if (file.status == "success" && file.percentage == 100) {
			// 	termianl_import_excel({
			// 		file: file.raw,
			// 	}).then((res) => {
			// 		console.log(res);
			// 		if (res.code == 200) {
			// 			this.$msg.success("文件导入成功！");
			// 			this.$refs.uploadExcel.clearFiles();
			// 		} else {
			// 			this.$msg.error("文件导入失败！");
			// 			this.$refs.uploadExcel.clearFiles();
			// 		}
			// 	});
			// }
		},
		// 上传地图
		mapChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			terminal_upload_map({
				file: file.raw,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("地图上传成功！");
					this.$refs.uploadMap.clearFiles();
				} else {
					this.$msg.error("地图上传失败！");
					this.$refs.uploadMap.clearFiles();
				}
			});
			// if (file.status == "success" && file.percentage == 100) {
			// 	terminal_upload_map({
			// 		file: file.raw,
			// 	}).then((res) => {
			// 		console.log(res);
			// 		if (res.code == 200) {
			// 			this.$msg.success("地图上传成功！");
			// 			this.$refs.uploadMap.clearFiles();
			// 		} else {
			// 			this.$msg.error("地图上传失败！");
			// 			this.$refs.uploadMap.clearFiles();
			// 		}
			// 	});
			// }
		},
		// 编辑坐标
		handleCoord() {
			this.$router.push(
				{ path: "/mapCoord" },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 新增/编辑时的复选框
		change() {
			if (this.GatewayMask.Gateway && this.GatewayMask.Mask) {
				this.Gateway = false;
				this.Mask = false;
				return;
			}
			if (!this.GatewayMask.Gateway) {
				this.Gateway = false;
				this.Mask = true;
				return;
			}
			if (!this.GatewayMask.Mask) {
				this.Mask = false;
				this.Gateway = true;
				return;
			}
			console.log(this.GatewayMask);
		},
		// 返回颜色
		healthyColor(field, verify) {
			if (field != null) {
				if (field.indexOf(verify) != -1) {
					return "color:#67c23a";
				}
			}
			return "color:#f56c6c";
		},
		//局部刷新
		reload() {
			this.isShow = false;
			this.$nextTick(() => {
				this.isShow = true;
			});
		},
		// 树形组件节点点击事件
		treeListNodeClick(data) {
			console.log(data);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.groupIdClick = data.id;
			if (this.spanIsActive == 1) {
				this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 0, data.id, "", 0);
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			} else if (this.spanIsActive == 2) {
				this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 2, data.id, "", 1);
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			} else if (this.spanIsActive == 0) {
				this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 0, data.id, "", 1);
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			}
		},
		// 树形组件数据获取
		getTreeListNodeData() {
			control_terminalGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					// res.data.forEach((element) => {
					// 	this.treeList.push(element);
					// });
					this.recursionTreeList2(res.data).forEach((element) => {
						this.treeData.push(element);
					});
					console.log(this.treeData);
					console.log(this.recursionTreeList2(res.data));
				} else {
					this.$msg.error("终端分组获取失败！");
				}
			});
		},
		// 递归  treeList2组件  添加isEdit属性
		recursionTreeList2(list) {
			list.forEach((item) => {
				item.isEdit = false;
				if (item.children.length > 0) {
					this.recursionTreeList2(item.children);
				}
			});
			return list;
		},
		// 终端组删除
		treeListNodeDelete(id) {
			// alert("删除");
			control_terminalGroup_delete({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.reload();
					this.$msg.success("删除终端组成功！");
					this.treeData = [];
					this.getTreeListNodeData();
					this.getAllTerminalGroup();
				} else if (res.code == 9002) {
					this.$msg.error("该组不为空，无法删除！");
				} else {
					this.$msg.error("删除终端组失败！");
				}
			});
		},
		// 终端组添加
		treeListNodeAdd(groupName, parentGroupId) {
			// alert("添加");
			control_terminalGroup_add({
				groupName: groupName,
				parentGroupId: parentGroupId,
			}).then((res) => {
				console.log(res);
				this.reload();
				this.treeData = [];
				this.getTreeListNodeData();
				this.getAllTerminalGroup();
				console.log(this.treeData);
				if (res.code == 200) {
					this.$msg.success("终端组添加成功！");
				} else {
					this.$msg.error("终端组添加失败！");
				}
			});
		},
		// 终端组编辑
		treeListNodeEdit(groupName, id) {
			// alert("编辑");
			control_terminalGroup_edit({
				id: id,
				groupName: groupName,
			}).then((res) => {
				console.log(res);
				this.reload();
				this.treeData = [];
				this.getTreeListNodeData();
				this.getAllTerminalGroup();
				console.log(this.treeData);
				if (res.code == 200) {
					this.$msg.success("终端组编辑成功！");
				} else {
					this.$msg.error("终端组编辑失败！");
				}
			});
		},
		// 上线中2(type2) 已入网1(type0) 故障中0(type0)切换
		terminalTabClick(index) {
			this.spanIsActive = index;
			this.spanIsActiveSelect();
		},
		spanIsActiveSelect() {
			this.partLoading = true;
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.groupIdClick = undefined;
			if (this.spanIsActive == 1) {
				this.getRegisterTerminal(this.pageNum, this.pageSize, 0, 0);
				this.terminalAllCount();
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			} else if (this.spanIsActive == 2) {
				this.getRegisterTerminal(this.pageNum, this.pageSize, 2, 1);
				this.terminalAllCount();
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			} else if (this.spanIsActive == 0) {
				this.getRegisterTerminal(this.pageNum, this.pageSize, 0, 1);
				this.terminalAllCount();
				setTimeout(() => {
					this.partLoading = false;
				}, 500);
			}
		},
		terminalAllCount() {
			terminal_count().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.onlineCount = res.data.online;
					this.connectedCount = res.data.connected;
					this.faultCount = res.data.fault;
				}
			});
		},
		// 弹窗——tab切换
		tabIndexClick(index) {
			this.tabIndexActiveIndex = index;
			this.tableDataAlertBox = [];
			this.currentPageAlertBox = 1;
			this.totalAlertBox = 0;
			this.pageSizeAlertBox = 5;
			this.pageNumAlertBox = 1;
			if (this.tabIndexActiveIndex == 0) {
				this.getTerminalBaseInfo(this.tabId);
			} else if (this.tabIndexActiveIndex == 1) {
				this.getTerminalContent(this.pageNumAlertBox, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 2) {
				this.getTerminalOperation(this.pageNumAlertBox, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 3) {
				this.getTerminalState(this.tabId);
			} else if (this.tabIndexActiveIndex == 4) {
				this.getTerminalStrategy(this.pageNumAlertBox, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 5) {
				this.getTerminalSafety(this.pageNumAlertBox, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 6) {
				this.getTerminalAdmittance(this.pageNumAlertBox, this.pageSizeAlertBox, this.tabId);
			}
		},
		// 搜索事件
		searchEvent() {
			// 需要根据spanIsActive来判断是谁要搜索
			console.log(this.spanIsActive, this.searchValue, this.groupIdClick);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			if (this.groupIdClick != undefined) {
				if (this.spanIsActive == 1) {
					this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 0, this.groupIdClick, this.searchValue, 0);
				} else if (this.spanIsActive == 2) {
					this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 2, this.groupIdClick, this.searchValue, 1);
				} else if (this.spanIsActive == 0) {
					this.getByGroupIdAllTerminal(this.pageNum, this.pageSize, 0, this.groupIdClick, this.searchValue, 1);
				}
			} else {
				if (this.spanIsActive == 1) {
					this.getSearchRegisterTerminal(this.pageNum, this.pageSize, this.searchValue, 0, 0);
				} else if (this.spanIsActive == 2) {
					this.getSearchRegisterTerminal(this.pageNum, this.pageSize, this.searchValue, 2, 1);
				} else if (this.spanIsActive == 0) {
					this.getSearchRegisterTerminal(this.pageNum, this.pageSize, this.searchValue, 0, 1);
				}
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 编辑
		handleEdit(index, row) {
			this.terminalEdit.id = row.id;
			this.terminalEdit.terminalName = row.name;
			this.terminalEdit.terminalNameSN = row.serial;
			this.terminalEdit.uuid = row.uuid;
			this.terminalEdit.terminalGroup = row.groupId;
			this.terminalEdit.information = row.vmbModelId;
			this.terminalEdit.internalNumber = row.internalNumber;
			this.terminalEdit.terminalPeople = row.person;
			this.terminalEdit.terminalPhone = row.contact;
			this.terminalEdit.terminalAgreement = row.protocol.toString();
			this.terminalEdit.terminalIp = row.platformIp;
			this.terminalEdit.clientIP = row.clientIP;
			this.terminalEdit.vpnGatewayIp =
				row.vpnGatewayIp == null || row.vpnGatewayIp == "" || row.vpnGatewayIp == undefined ? "" : row.vpnGatewayIp;
			this.terminalEdit.organization = row.organization;
			this.terminalEdit.direction = row.direction;
			this.terminalEdit.vmbNumber = row.vmbNumber;
			this.terminalEdit.clientPhoneNumber = row.clientPhoneNumber;

			// if (row.clientGateway != "") {
			// 	this.GatewayMask.Gateway = true;
			// } else {
			// 	this.GatewayMask.Gateway = false;
			// }
			// if (row.terMask != "" && row.terGateway != "" && row.ipAddress != "") {
			// 	this.GatewayMask.Mask = true;
			// } else {
			// 	this.GatewayMask.Mask = false;
			// }

			this.terminalEdit.clientGateway = row.clientGateway;
			this.terminalEdit.terMask = row.terMask;
			this.terminalEdit.terGateway = row.terGateway;
			this.terminalEdit.ipAddress = row.ipAddress;
			this.terminalEdit.delay_time = row.delayTime;

			this.terminalEdit.monitorOpt = row.monitorEmployeeId;
			this.terminalEdit.monitorManage = row.monitorAdminEmployeeId;

			this.terminalEdit.distinguishability = row.resolutionRatio;
			this.terminalEdit.publishingPlatformIp = row.publishingPlatformIp;
			this.terminalEdit.publishingPlatformPort = row.publishingPlatformPort;
			this.terminalEdit.publishingPlatformHeartbeat = row.publishingPlatformHeartbeat;
      this.terminalEdit.boardPort = row.boardPort < 0 ? "" : row.boardPort;
      this.terminalEdit.vpnFlag = row.vpnFlag;

      if (row.cameraId > 0) {
        this.terminalEdit.cameraId = row.cameraId;
        this.terminalEdit.cameraIp = row.cameraDevice.ip;
        this.terminalEdit.cameraPort = row.cameraDevice.port;
        this.terminalEdit.cameraAccountName = row.cameraDevice.accountName;
        this.terminalEdit.cameraAccountPassword = atob(row.cameraDevice.password);
        this.terminalEdit.cameraTimeLen = row.cameraDevice.timeLen;
        this.terminalEdit.cameraInterval = row.cameraDevice.interval;
      }
			this.alertBoxFormVisible = true;
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			terminal_delete({
				id: row.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("删除终端成功！");
					this.spanIsActiveSelect();
				} else {
					this.$msg.error("删除终端失败！");
				}
			});
		},
		// 查看
		handleLook(index, row) {
			console.log(index, row);
			this.tabId = row.id;
			this.tabIndexClick(0);
			this.alertBoxTabVisible = true;
		},
    handleSmsCheck(index, row) {
      terminal_sms_check({id: row.id})
          .then((res) => {
            if (res.code === 200) {
              this.$msg.success("正在检查前置sim卡状态，请稍后查看");
            } else {
              this.$msg.error(res.message);
            }
          })
    },
    handleReboot(index, row) {
      this.restartButtonVisible = false;
      terminal_restart({
        host: row.ipAddress
      }).then(res => {
        if (res.code === 200) {
          this.$msg.success("重启成功，请稍后查看");
        } else {
          this.$msg.error(res.message);
        }
      });
    },
		// 注册
		handleRegister(index, row) {
			console.log(index, row);
			this.alertBoxDetailsVisible = true;
			this.terminalRegister.id = row.id;
			this.terminalRegister.terminalType = row.terminalTypeName;
			this.terminalRegister.terminalIP = row.ipAddress;
			this.terminalRegister.terminalMAC = row.mac;
			this.terminalRegister.terminalSerial = row.serial;
			this.terminalRegister.terminalPlace = row.coord;
			this.terminalRegister.terminalLoginTime = row.createTime;
		},
		// 批量注册
		allRegister() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				terminal_all_every_register({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("终端批量注册成功！");
						this.spanIsActive = 0;
						this.spanIsActiveSelect();
					} else {
						this.$msg.error("终端批量注册失败！");
					}
				});
			}
		},

		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.groupIdClick != undefined) {
				if (this.spanIsActive == 1) {
					this.getByGroupIdAllTerminal(val, this.pageSize, 0, this.groupIdClick, "", 0);
				} else if (this.spanIsActive == 2) {
					this.getByGroupIdAllTerminal(val, this.pageSize, 2, this.groupIdClick, "", 1);
				} else if (this.spanIsActive == 0) {
					this.getByGroupIdAllTerminal(val, this.pageSize, 0, this.groupIdClick, "", 1);
				}
			} else {
				if (this.spanIsActive == 1) {
					this.getRegisterTerminal(val, this.pageSize, 0, 0);
				} else if (this.spanIsActive == 2) {
					this.getRegisterTerminal(val, this.pageSize, 2, 1);
				} else if (this.spanIsActive == 0) {
					this.getRegisterTerminal(val, this.pageSize, 0, 1);
				}
			}
		},
		// 新增设备入网
		handleTerminalNetworkAdd() {
			this.initTerminalNetworkInfo();
			this.alertBoxAddVisible = true;
			this.groupIdClick = undefined;
		},
		// 初始化新增设备入网
		initTerminalNetworkInfo() {
			this.terminalNetworkInfo.terminalName = "";
			this.terminalNetworkInfo.terminalNameNumber = "";
			this.terminalNetworkInfo.terminalNameNumberSN = "";
			this.terminalNetworkInfo.uuid = "";
			this.terminalNetworkInfo.terminalAgreement = "1";
			this.terminalNetworkInfo.terminalGroup = "";
			this.terminalNetworkInfo.information = "";
			this.terminalNetworkInfo.clientIP = "";
			this.terminalNetworkInfo.vpnGatewayIp = "";
			this.terminalNetworkInfo.organization = "";
			this.terminalNetworkInfo.direction = "";
			this.terminalNetworkInfo.vmbNumber = "";
			this.terminalNetworkInfo.clientPhoneNumber = "";
			this.terminalNetworkInfo.monitorOpt = [];
			this.terminalNetworkInfo.monitorManage = [];
			this.terminalNetworkInfo.distinguishability = "";
      this.terminalNetworkInfo.boardPort = "";
      this.terminalNetworkInfo.vpnFlag = 0;
		},
		// alertBox——新增设备入网 关闭
		alertBoxAddclose() {
			this.alertBoxAddVisible = false;
			this.initTerminalNetworkInfo();
		},
		// alertBox——新增设备入网 确定
		async alertBoxAddConfirm() {
      function getFormattedDate() {
        let date = new Date();
        let year = date.getFullYear();
        let month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero based
        let day = ("0" + date.getDate()).slice(-2);
        let hours = ("0" + date.getHours()).slice(-2);
        let minutes = ("0" + date.getMinutes()).slice(-2);
        let seconds = ("0" + date.getSeconds()).slice(-2);

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      if (
          this.cameraDevice.cameraIp !== ""
          && this.cameraDevice.cameraAccountName !==""
          && this.cameraDevice.cameraAccountPassword !== "") {
        await camera_add({
          ip: this.cameraDevice.cameraIp,
          accountName: this.cameraDevice.cameraAccountName,
          password: btoa(this.cameraDevice.cameraAccountPassword),
          port: this.cameraDevice.cameraPort,
          createTime: getFormattedDate(),
          type: 1,
          timeLen: this.cameraDevice.cameraTimeLen,
          interval: this.cameraDevice.cameraInterval
        }).then((res) => {
          if (res.code === 200) {
            this.terminalNetworkInfo.cameraId = res.data;
          }else{
            this.$msg.error("摄像头添加失败");
          }
        });
      }
      await terminal_add({
				name: this.terminalNetworkInfo.terminalName,
				internalNumber: this.terminalNetworkInfo.terminalNameNumber,
				uuid: this.terminalNetworkInfo.uuid,
				serial: this.terminalNetworkInfo.terminalNameNumberSN,
				// person: this.terminalNetworkInfo.terminalPeople,
				person: "admin",
				contact: this.terminalNetworkInfo.terminalPhone,
				protocol: this.terminalNetworkInfo.terminalAgreement,
				groupId: this.terminalNetworkInfo.terminalGroup,
				vmbModelId: this.terminalNetworkInfo.information,
				platformIp: this.terminalNetworkInfo.terminalIp,
				clientIP: this.terminalNetworkInfo.clientIP,
				vpnGatewayIp: this.terminalNetworkInfo.vpnGatewayIp,
				organization: this.terminalNetworkInfo.organization,
				direction: this.terminalNetworkInfo.direction,
				vmbNumber: this.terminalNetworkInfo.vmbNumber,
				clientPhoneNumber: this.terminalNetworkInfo.clientPhoneNumber,

				clientGateway: this.terminalNetworkInfo.clientGateway,
				terMask: this.terminalNetworkInfo.terMask,
				terGateway: this.terminalNetworkInfo.terGateway,
				delayTime: this.terminalNetworkInfo.delay_time,
				ipAddress: this.terminalNetworkInfo.ipAddress,

				monitorEmployeeId: this.terminalNetworkInfo.monitorOpt,
				monitorAdminEmployeeId: this.terminalNetworkInfo.monitorManage,

				resolutionRatio: this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.distinguishability,
				publishingPlatformIp: this.terminalNetworkInfo.publishingPlatformIp,
				publishingPlatformPort: this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.publishingPlatformPort,
        publishingPlatformHeartbeat:
            this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.publishingPlatformHeartbeat,
        cameraId: this.terminalNetworkInfo.cameraId,
        boardPort: this.terminalNetworkInfo.boardPort === "" ? -1 : this.terminalNetworkInfo.boardPort,
        vpnFlag: this.terminalNetworkInfo.vpnFlag,
      }).then((res) => {
				if (res.code == 200) {
					this.$msg.success("设备入网成功！");
					this.alertBoxAddVisible = false;
					this.spanIsActiveSelect();
				} else {
					this.$msg.error("设备入网失败！");
				}
			});
		},
		// alertBox——表单输入 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
		},
		// alertBox——表单输入 确定
		async alertBoxFormConfirm() {
      function getFormattedDate() {
        let date = new Date();
        let year = date.getFullYear();
        let month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are zero based
        let day = ("0" + date.getDate()).slice(-2);
        let hours = ("0" + date.getHours()).slice(-2);
        let minutes = ("0" + date.getMinutes()).slice(-2);
        let seconds = ("0" + date.getSeconds()).slice(-2);

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      if (this.terminalEdit.cameraId > 0) {
        // 更新
        camera_update({
          id: this.terminalEdit.cameraId,
          ip: this.terminalEdit.cameraIp,
          accountName: this.terminalEdit.cameraAccountName,
          password: btoa(this.terminalEdit.cameraAccountPassword),
          port: this.terminalEdit.cameraPort,
          timeLen: this.terminalEdit.cameraTimeLen,
          interval: this.terminalEdit.cameraInterval
        })
      }
      if ((this.terminalEdit.cameraId < 1 ) && (this.terminalEdit.cameraIp !== "")) {
        // 创建
        await camera_add({
          ip: this.terminalEdit.cameraIp,
          accountName: this.terminalEdit.cameraAccountName,
          password: btoa(this.terminalEdit.cameraAccountPassword),
          port: this.terminalEdit.cameraPort,
          createTime: getFormattedDate(),
          type: 1,
          timeLen: this.cameraDevice.cameraTimeLen,
          interval: this.cameraDevice.cameraInterval
        }).then(res => {
          if (res.code === 200) {
            this.terminalEdit.cameraId = res.data;
          }
        })
      }

			await terminal_updata({
				id: this.terminalEdit.id,
				name: this.terminalEdit.terminalName,
				vmbModelId: this.terminalEdit.information,
				groupId: this.terminalEdit.terminalGroup,
				internalNumber: this.terminalEdit.internalNumber,
				// person: this.terminalEdit.terminalPeople,
				person: "admin",
				contact: this.terminalEdit.terminalPhone,
				protocol: this.terminalEdit.terminalAgreement,
				platformIp: this.terminalEdit.terminalIp,
				clientIP: this.terminalEdit.clientIP,
				vpnGatewayIp: this.terminalEdit.vpnGatewayIp,
				organization: this.terminalEdit.organization,
				direction: this.terminalEdit.direction,
				vmbNumber: this.terminalEdit.vmbNumber,
				clientPhoneNumber: this.terminalEdit.clientPhoneNumber,

				clientGateway: this.terminalEdit.clientGateway,
				terMask: this.terminalEdit.terMask,
				terGateway: this.terminalEdit.terGateway,
				delayTime: this.terminalEdit.delay_time,
				ipAddress: this.terminalEdit.ipAddress,

				monitorEmployeeId: this.terminalEdit.monitorOpt,
				monitorAdminEmployeeId: this.terminalEdit.monitorManage,

				resolutionRatio: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.distinguishability,
				publishingPlatformIp: this.terminalEdit.publishingPlatformIp,
				publishingPlatformPort: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.publishingPlatformPort,
				publishingPlatformHeartbeat: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.publishingPlatformHeartbeat,
        cameraId: this.terminalEdit.cameraId,
        boardPort: this.terminalEdit.boardPort === "" ? -1 : this.terminalEdit.boardPort,
        vpnFlag: this.terminalEdit.vpnFlag,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("终端修改成功！");
					this.alertBoxFormVisible = false;
					this.spanIsActiveSelect();
				} else {
					this.$msg.error("终端修改失败！");
				}
			});
		},
		// alertBox——数据显示 关闭
		alertBoxDetailsclose() {
			this.alertBoxDetailsVisible = false;
		},
		// alertBox——数据显示 通过
		alertBoxDetailsConfirm() {
			terminal_every_register({
				id: this.terminalRegister.id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("终端注册成功！");
					this.alertBoxDetailsVisible = false;
					this.spanIsActiveSelect();
				} else {
					this.$msg.error("终端注册失败！");
				}
			});
		},
		// alertBox——数据显示 拒绝
		alertBoxDetailsRefuse() {
			this.alertBoxDetailsVisible = false;
		},
		// alertBox——tab切换 关闭
		alertBoxTabclose() {
			this.alertBoxTabVisible = false;
			this.tabId = undefined;
		},
		// alertBox——tab切换 确定
		alertBoxTabConfirm() {
			this.alertBoxTabVisible = false;
			this.tabId = undefined;
		},

		// alertBox——tab切换 清空
		handleEmpty() {
			console.log(this.tableDataAlertBox);
			if (this.tableDataAlertBox == null || this.tableDataAlertBox.length <= 0) {
				this.$msg.warning("暂无可清空的数据！");
			} else {
				if (this.tabIndexActiveIndex == 4) {
					terminal_removeAllPolicy({
						terminalId: this.tabId,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("绑定策略清空成功！");
							this.tabIndexClick(4);
						} else {
							this.$msg.error("绑定策略清空失败！");
						}
					});
				} else if (this.tabIndexActiveIndex == 5) {
					terminal_removeAllPolicy({
						terminalId: this.tabId,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("安全防护清空成功！");
							this.tabIndexClick(5);
						} else {
							this.$msg.error("安全防护清空失败！");
						}
					});
				} else if (this.tabIndexActiveIndex == 6) {
					terminal_removePolicy_ipsource({
						terminalId: this.tabId,
						sourceIds: decodeURIComponent([]),
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("准入系统清空成功！");
							this.tabIndexClick(6);
						} else {
							this.$msg.error("准入系统清空失败！");
						}
					});
				}
			}
		},

		// alertBox——tab切换 删除
		handleAlertBoxDelete() {
			console.log(this.multipleSelectionAlertBox);
			if (this.multipleSelectionAlertBox.length > 0) {
				var idList = [];
				var idList_image = [];
				this.multipleSelectionAlertBox.forEach((item) => {
					if (item.type == 1) {
						idList.push(item.id);
					} else if (item.type == 2) {
						idList_image.push(item.id);
					} else {
						idList.push(item.id);
					}
				});
				console.log(decodeURIComponent(idList));
				if (this.tabIndexActiveIndex == 4) {
					terminal_removePolicy({
						terminalId: this.tabId,
						policyIds: decodeURIComponent(idList),
						imagePolicyIds: decodeURIComponent(idList_image),
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("绑定策略删除成功！");
							this.tabIndexClick(4);
						} else {
							this.$msg.error("绑定策略删除失败！");
						}
					});
				} else if (this.tabIndexActiveIndex == 5) {
					terminal_removePolicy({
						terminalId: this.tabId,
						policyIds: decodeURIComponent(idList),
						imagePolicyIds: decodeURIComponent(idList_image),
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("安全防护删除成功！");
							this.tabIndexClick(5);
						} else {
							this.$msg.error("安全防护删除失败！");
						}
					});
				} else if (this.tabIndexActiveIndex == 6) {
					terminal_removePolicy_ipsource({
						terminalId: this.tabId,
						sourceIds: decodeURIComponent(idList),
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("准入系统删除成功！");
							this.tabIndexClick(6);
						} else {
							this.$msg.error("准入系统删除失败！");
						}
					});
				}
			}
		},

		// 分页组件事件
		handleSizeChangeAlertBox(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChangeAlertBox(val) {
			console.log(`当前页: ${val}`);
			if (this.tabIndexActiveIndex == 1) {
				this.getTerminalContent(val, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 2) {
				this.getTerminalOperation(val, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 4) {
				this.getTerminalStrategy(val, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 5) {
				this.getTerminalSafety(val, this.pageSizeAlertBox, this.tabId);
			} else if (this.tabIndexActiveIndex == 6) {
				this.getTerminalAdmittance(val, this.pageSizeAlertBox, this.tabId);
			}
		},
		// 4/5/6被选中
		handleSelectionChangeAlertBox(val) {
			this.multipleSelectionAlertBox = val;
			console.log(this.multipleSelectionAlertBox);
		},
		// 获取已注册终端
    getRegisterTerminal(page, size, type, status) {
      terminal_all_register({
				page: page,
				size: size,
				type: type,
				status: status,
			}).then((res) => {
				if (res.code === 200) {
          res.data.result.forEach(item => {
            let emptyCameraDevice = {
              id: 0,
              ip: "",
              accountName: "",
              password: "",
              port: 0,
              interval: 2,
              timeLen: 10,
              type: 1
            };
            if (item.cameraId !== 0) {
              camera_query({
                id:item.cameraId
              }).then(res => {
                if (res.code === 200 && res.data !== null) {
                  emptyCameraDevice = res.data;
                }else {
                  item.cameraId = 0;
                }
              }).then( () => {
                  item.cameraDevice = emptyCameraDevice;
              })
            }
          });
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
				} else {
					this.$msg.error("已注册终端获取失败！");
				}
			});
		},
		// 获取未注册终端
		getUnregisterTerminal(page, size, type, status) {
			terminal_all_unregister({
				page: page,
				size: size,
				type: type,
				status: status,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
				} else {
					this.$msg.error("未注册终端获取失败！");
				}
			});
		},
		// 搜索已注册终端
		getSearchRegisterTerminal(page, size, keyword, type, status) {
			terminal_all_register({
				page: page,
				size: size,
				keyword: keyword,
				type: type,
				status: status,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
				this.multipleSelection = [];
			});
		},
		// 搜索未注册终端
		getSearchUnregisterTerminal(page, size, keyword, type, status) {
			terminal_all_unregister({
				page: page,
				size: size,
				keyword: keyword,
				type: type,
				status: status,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
				this.multipleSelection = [];
			});
		},
		// 获取设备数据——基本信息
		getTerminalBaseInfo(id) {
			terminal_baseInfo({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.terminalBaseInfo = {
						name: res.data.name,
						ipAddress: res.data.ipAddress,
						groupName: res.data.groupName,
						coord: res.data.coord,
						version: res.data.version,
						state: res.data.status,
						controllerState: res.data.netWorkDown,
						vpnState: res.data.vpnStatus,
						doorState: res.data.doorStatus,
						devPosture: res.data.angleStatus,
						devHumidity: res.data.rh != null ? res.data.rh + "%RH " : "",
						rhStatus: res.data.rhStatus,
						devTemperature: res.data.tempture != null ? res.data.tempture + "°C " : "",
						temptureStatus: res.data.temptureStatus,

						cpu: res.data.cpu,
						cpuStatus: res.data.cpuStatus,
						memoryNow: res.data.memoryNow,
						memStatus: res.data.memStatus,
						diskNow: res.data.diskNow,
						diskStatus: res.data.diskStatus,
						cpuTempture: res.data.cpuTempture,
						powerStatus: res.data.powerStatus,

						clientGateway: res.data.clientGateway,
						terMask: res.data.terMask,
						terGateway: res.data.terGateway,
						delayTime: res.data.delay_time,
						cpuTempStatus: res.data.cpuTempStatus,
					};
				} else {
					this.$msg.error("获取终端基本信息失败！");
				}
			});
		},
		// 获取设备数据——发布内容——过滤内容（去掉颜色数值代码）
		contentFilter(value) {
			let contentStr = "";
			value.split(",").forEach((item) => {
				contentStr += item.split("/")[0] + ",";
			});
			return contentStr.slice(0, -1);
		},
		// 获取设备数据——发布内容
		getTerminalContent(page, size, id) {
			terminal_content({
				page: page,
				size: size,
				terminalId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.result.forEach((item) => {
						if (item.imageName) {
							item.imagePateStr = "https://" + window.location.host + "/images/" + item.imageName;
						} else {
							item.content = this.contentFilter(item.content);
						}
					});
					this.tableDataAlertBox1 = res.data.result;
					this.totalAlertBox1 = res.data.total;
				} else {
					this.$msg.error("发布内容获取失败！");
				}
			});
		},
		// 获取设备数据——运维记录
		getTerminalOperation(page, size, id) {
			terminal_operation({
				page: page,
				size: size,
				terminalId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox2 = res.data.result;
					this.totalAlertBox2 = res.data.total;
				} else {
					this.$msg.error("运维记录获取失败！");
				}
			});
		},
		// 获取设备数据——设备状态
		getTerminalState(id) {
			terminal_state({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.terminalState = {
						cpu: res.data.cpu,
						memory: res.data.memoryNow + " / " + res.data.memorySum,
						storage: res.data.diskNow + " / " + res.data.diskSum,
						managementPort: "暂无数据",
						dataPort: "暂无数据",
					};
				} else {
					this.$msg.error("获取设备状态失败！");
				}
			});
		},
		// 获取设备数据——绑定策略
		getTerminalStrategy(page, size, id) {
			terminal_strategy({
				page: page,
				size: size,
				terminalId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("绑定策略获取失败！");
				}
			});
		},
		// 获取设备数据——安全防护
		getTerminalSafety(page, size, id) {
			terminal_safety({
				page: page,
				size: size,
				terminalId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("安全防护获取失败！");
				}
			});
		},
		// 获取设备数据——系统准入
		getTerminalAdmittance(page, size, id) {
			terminal_admittance({
				page: page,
				size: size,
				terminalId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.totalAlertBox = res.data.total;
				} else {
					this.$msg.error("准入系统获取失败！");
				}
			});
		},
		// 查询所有的终端组
		getAllTerminalGroup() {
			issueflow_group().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.terminalGroupOptions = [];
					res.data.forEach((item) => {
						this.terminalGroupOptions.push({
							label: item.groupName,
							value: item.id,
						});
					});
				} else {
					this.$msg.error("获取终端组失败！");
				}
			});
		},
		// 查询所有的情报板
		getAllIntelligence() {
			terminal_intelligence().then((res) => {
				console.log(res);
				if (res.code == 200) {
					res.data.forEach((item) => {
						this.intelligenceOptions.push({
							label: item.vmbTypeName,
							value: item.id,
						});
					});
				} else {
					this.$msg.error("获取情报板失败！");
				}
			});
		},
		// 根据分组id查询该组下的所有终端（包含搜索、分页）
		getByGroupIdAllTerminal(page, size, type, groupId, keyword, status) {
			control_terminalGroup_terminal({
				page: page,
				size: size,
				type: type,
				groupId: groupId,
				keyword: keyword,
				status: status,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableData = res.data.result;
					this.total = res.data.total;
					this.multipleSelection = [];
				} else {
					this.$msg.error("该分组的终端获取失败！");
				}
			});
		},
		// 生成入网许可
		generateNetworkAccessPermissions() {
			if (this.alertBoxAddVisible == true && this.alertBoxFormVisible == false) {
				// 添加
				var fileNameAdd = this.terminalNetworkInfo.terminalNameNumber + "-" + this.terminalNetworkInfo.terminalNameNumberSN + ".conf";
				terminal_add({
					name: this.terminalNetworkInfo.terminalName,
					internalNumber: this.terminalNetworkInfo.terminalNameNumber,
					uuid: this.terminalNetworkInfo.uuid,
					serial: this.terminalNetworkInfo.terminalNameNumberSN,
					// person: this.terminalNetworkInfo.terminalPeople,
					person: "admin",
					contact: this.terminalNetworkInfo.terminalPhone,
					protocol: this.terminalNetworkInfo.terminalAgreement,
					groupId: this.terminalNetworkInfo.terminalGroup,
					vmbModelId: this.terminalNetworkInfo.information,
					platformIp: this.terminalNetworkInfo.terminalIp,
					clientIP: this.terminalNetworkInfo.clientIP,
					vpnGatewayIp: this.terminalNetworkInfo.vpnGatewayIp,
					organization: this.terminalNetworkInfo.organization,
					direction: this.terminalNetworkInfo.direction,
					vmbNumber: this.terminalNetworkInfo.vmbNumber,
					clientPhoneNumber: this.terminalNetworkInfo.clientPhoneNumber,

					clientGateway: this.terminalNetworkInfo.clientGateway,
					terMask: this.terminalNetworkInfo.terMask,
					terGateway: this.terminalNetworkInfo.terGateway,
					delayTime: this.terminalNetworkInfo.delay_time,
					ipAddress: this.terminalNetworkInfo.ipAddress,

					monitorEmployeeId: this.terminalNetworkInfo.monitorOpt,
					monitorAdminEmployeeId: this.terminalNetworkInfo.monitorManage,

					resolutionRatio: this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.distinguishability,
					publishingPlatformIp: this.terminalNetworkInfo.publishingPlatformIp,
					publishingPlatformPort: this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.publishingPlatformPort,
					publishingPlatformHeartbeat:
						this.terminalNetworkInfo.terminalAgreement != "5" ? "" : this.terminalNetworkInfo.publishingPlatformHeartbeat,
          cameraId: this.terminalNetworkInfo.cameraId,
          boardPort: this.terminalNetworkInfo.boardPort === "" ? -1 : this.terminalNetworkInfo.boardPort,
          vpnFlag: this.terminalNetworkInfo.vpnFlag,
				})
					.then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("生成入网许可成功！");
							this.alertBoxAddVisible = false;
							this.spanIsActiveSelect();
						} else {
							this.$msg.error("生成入网许可失败！");
						}
					})
					.then(() => {
						terminal_generateNetworkAccessPermissions({
							fileName: fileNameAdd,
						}).then((res) => {
							console.log(res);
							let content = JSON.stringify(res);
							let blob = new Blob([content], { type: "application/octet-stream" });
							let fileName = fileNameAdd; //自定义下载文件的名字
							if ("download" in document.createElement("a")) {
								// 非IE下载
								let elink = document.createElement("a");
								elink.download = fileName;
								elink.style.display = "none";
								elink.href = URL.createObjectURL(blob);
								document.body.appendChild(elink);
								elink.click();
								URL.revokeObjectURL(elink.href); // 释放URL 对象
								document.body.removeChild(elink);
							} else {
								// IE10+下载
								navigator.msSaveBlob(blob, fileName);
							}
						});
					});
			}
      else if (this.alertBoxAddVisible == false && this.alertBoxFormVisible == true) {
				// 编辑
				terminal_updata({
					id: this.terminalEdit.id,
					name: this.terminalEdit.terminalName,
					vmbModelId: this.terminalEdit.information,
					groupId: this.terminalEdit.terminalGroup,
					internalNumber: this.terminalEdit.internalNumber,
					// person: this.terminalEdit.terminalPeople,
					person: "admin",
					contact: this.terminalEdit.terminalPhone,
					protocol: this.terminalEdit.terminalAgreement,
					platformIp: this.terminalEdit.terminalIp,
					clientIP: this.terminalEdit.clientIP,
					vpnGatewayIp: this.terminalEdit.vpnGatewayIp,
					organization: this.terminalEdit.organization,
					direction: this.terminalEdit.direction,
					vmbNumber: this.terminalEdit.vmbNumber,
					clientPhoneNumber: this.terminalEdit.clientPhoneNumber,

					clientGateway: this.terminalEdit.clientGateway,
					terMask: this.terminalEdit.terMask,
					terGateway: this.terminalEdit.terGateway,
					delayTime: this.terminalEdit.delay_time,
					ipAddress: this.terminalEdit.ipAddress,

					monitorEmployeeId: this.terminalEdit.monitorOpt,
					monitorAdminEmployeeId: this.terminalEdit.monitorManage,

					resolutionRatio: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.distinguishability,
					publishingPlatformIp: this.terminalEdit.publishingPlatformIp,
					publishingPlatformPort: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.publishingPlatformPort,
					publishingPlatformHeartbeat: this.terminalEdit.terminalAgreement != "5" ? "" : this.terminalEdit.publishingPlatformHeartbeat,
          boardPort: this.terminalEdit.boardPort === "" ? -1 : this.terminalEdit.boardPort,
          vpnFlag: this.terminalEdit.vpnFlag,
				})
					.then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.$msg.success("生成入网许可成功！");
							this.alertBoxFormVisible = false;
							this.spanIsActiveSelect();
						} else {
							this.$msg.error("生成入网许可失败！");
						}
					})
					.then(() => {
						terminal_generateNetworkAccessPermissions({
							fileName: this.terminalEdit.internalNumber + "-" + this.terminalEdit.terminalNameSN + ".conf",
						}).then((res) => {
							console.log(res);
							let content = JSON.stringify(res);
							let blob = new Blob([content], { type: "application/octet-stream" });
							let fileName = this.terminalEdit.internalNumber + "-" + this.terminalEdit.terminalNameSN + ".conf"; //自定义下载文件的名字
							if ("download" in document.createElement("a")) {
								// 非IE下载
								let elink = document.createElement("a");
								elink.download = fileName;
								elink.style.display = "none";
								elink.href = URL.createObjectURL(blob);
								document.body.appendChild(elink);
								elink.click();
								URL.revokeObjectURL(elink.href); // 释放URL 对象
								document.body.removeChild(elink);
							} else {
								// IE10+下载
								navigator.msSaveBlob(blob, fileName);
							}
						});
					});
			}
		},
		// 批量导入日志信息-关闭
		alertBoxLogclose() {
			this.alertBoxLogVisible = false;
			this.alertBoxLogArray = [];
		},
	},
};
</script>
<style lang="less" scoped>
.terminalIndexContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.terminalIndexTreeContent {
		width: 15%;
		height: 100%;
		margin-right: 2px;
		box-sizing: border-box;
		background: #ffffff;
		overflow: hidden;
	}
	.terminalIndexListContent {
		width: 85%;
		height: 100%;
		background: #ffffff;
		padding: 8px;
		box-sizing: border-box;
		.terminalIndexListTab {
			width: 100%;
			height: 68px;
			box-sizing: border-box;
			padding: 0 12px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.terminalIndexListTabBtn {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				span {
					font-size: 16px;
					color: #34a6fa;
					display: inline-block;
					padding: 8px 12px;
					box-sizing: border-box;
				}
				span:hover {
					cursor: pointer;
				}
				span.isActive {
					background: #a8d55f;
					background-color: #a8d55f;
					color: #fff;
					border-radius: 4px;
				}
			}
			.terminalNetworkAdd {
				flex: 1;
				height: 100%;
				margin: 0 48px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				[class*="wj-button-"] {
					font-size: 14px;
					padding: 12px 18px;
					margin: 0 12px;
				}
			}
			.terminalIndexListTabSearch {
				/deep/ .el-input {
					font-size: 16px;
				}
			}
		}
		.terminalIndexListArray {
			width: 100%;
			height: calc(100% - 68px);
			box-sizing: border-box;
			padding: 0 12px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.terminalIndexListArrayContent {
				width: 100%;
				flex: 1;
				padding: 22px 0;
				box-sizing: border-box;

				/deep/ .el-table {
					border-left: 1px solid #ebeef5;
					border-right: 1px solid #ebeef5;
					border-top: 1px solid #ebeef5;
				}
				/deep/ .el-link {
					margin: 0 12px 0 0;
				}
			}

			.terminalIndexListArrayPage {
				width: 100%;
				height: 48px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
}
.tabIndex div {
	width: 100% !important;
}
.infoRow_form_wrap span {
	min-width: 114px;
}
</style>
